<template>
    <div>
        <m-table name="admin-store" :action="action" :search="search" :params="params" ref="table">

            <el-table-column label="门店名" prop="name" />

            <el-table-column label="门头照" width="130">
                <template slot-scope="scope">
                    <el-avatar :src="scope.row.image" fit="contain"></el-avatar>
                </template>
            </el-table-column>

            <el-table-column label="手机号" prop="phone" />

            <el-table-column label="地址" prop="address" />

            <el-table-column label="商户等级">
                <el-link slot-scope="scope" @click="handelerSetLevel(scope.row)"
                    :type="scope.row.state == 1 ? 'success' : 'danger'">
                    {{ scope.row.levelName || '未设置' }}
                </el-link>
            </el-table-column>

            <el-table-column label="商户收益">
                <el-button type="text" @click="viewPrice(scope.row)" slot-scope="scope">查看</el-button>
            </el-table-column>

            <el-table-column label="商户余额">
                <el-button type="text" @click="handlerSetMoney(scope.row)"
                    slot-scope="scope">{{ scope.row.money }}</el-button>
            </el-table-column>

            <el-table-column label="状态" prop="state">
                <el-link slot-scope="scope" @click="changeAccountState(scope.row)"
                    :type="scope.row.state == 1 ? 'success' : 'danger'">{{
                        getStateName(scope.row.state) }}</el-link>
            </el-table-column>

            <el-table-column label="注册时间" prop="created" width="220" />
        </m-table>

        <el-dialog title="设置商户等级" :visible.sync="setLevel.show" width="250px">
            <el-select v-model="setLevel.data.level" placeholder="请选择商户等级" style="width: 100%;">
                <el-option :key="0" label="请选择等级" :value="0"></el-option>
                <el-option v-for="item in levels" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="setStoreLevel">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="商户交易金额" :visible.sync="showPricePanel" width="250px">
            <el-form>
                <el-form-item label="本月交易额">
                    <el-input v-model="prices.month" disabled></el-input>
                </el-form-item>
                <el-form-item label="上月交易额">
                    <el-input v-model="prices.month2" disabled></el-input>
                </el-form-item>
                <el-form-item label="上上月交易额">
                    <el-input v-model="prices.month3" disabled></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="账户充值" :visible.sync="setMoney.show" width="250px">
            <el-form>
                <el-form-item label="充值金额">
                    <el-input v-model="setMoney.data.money" placeholder="请输入充值金额"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                    <el-button type="success" @click="setStoreMoney">充值</el-button>
                </span>
        </el-dialog>

    </div>

</template>

<script>
import request from '@/utils/request'
import { accountState } from '@/config/account'
export default {
    data() {
        return {
            showPricePanel: false,
            states: accountState,
            levels: [],
            prices: [],
            search: [
                { icon: 'el-icon-mobile', type: 'like', name: 'name', label: '用户姓名', span: 4, value: '' },
                { icon: 'el-icon-mobile', type: 'like', name: 'phone', label: '联系方式', span: 4, value: '' }
            ],
            action: { remove: false, edit: true, add: true, export: false },
            setMoney: {
                show: false,
                data: {
                    id: 0,
                    money: null
                }
            },
            setLevel: {
                show: false,
                data: {
                    id: 0,
                    level: 0
                }
            },
            params: [
                { name: 'id', value: '', hide: true },
                { name: 'name', value: '', label: '门店名', type: 'string' },
                { name: 'image', value: '', label: '门店图', type: 'image', count: 1 },
                { name: 'phone', value: '', label: '手机号', type: 'string' },
                { name: 'address', value: '', label: '门店地址', type: 'string' },
                { name: 'state', value: '', label: '状态', type: 'select', data: accountState },
                { name: 'level', value: '', label: '商户等级', type: 'apiSelect', url: 'admin-store/levels' },
            ]
        }
    },
    mounted() {
        this.loadLevels()
    },
    methods: {
        async viewPrice(e) {
            this.showPricePanel = true
            this.prices = await request.get(`admin-store/price/${e.id}`)
            console.log(this.prices)
        },
        async loadLevels() {
            this.levels = await request.get('admin-store/levels')
        },
        getStateName(e) {
            try {
                return this.states.find(x => x.id == e).name
            } catch (error) {
                return '未知'
            }
        },
        async changeAccountState(e) {

            await request.post(`admin-store/set-state/${e.id}/${e.state}`)

            this.$message.success('操作成功')

            this.$refs.table.reload()
        },
        handelerSetLevel(e) {
            this.setLevel.show = true
            this.setLevel.data.id = e.id
            this.setLevel.data.level = e.level
        },
        handlerSetMoney(e) {
            this.setMoney.show = true
            this.setMoney.data.id = e.id
        },
        async setStoreLevel() {
            await request.post(`admin-store/set-level/${this.setLevel.data.id}/${this.setLevel.data.level}`)
            this.$message.success('操作成功')
            this.$refs.table.reload()
            this.setLevel.show = false
        },
        async setStoreMoney() {
            await request.post(`admin-store/money/${this.setMoney.data.id}/${this.setMoney.data.money}`)
            this.$message.success('操作成功')
            this.$refs.table.reload()
            this.setMoney.show = false
        }
    }
}
</script>